<template>
  <div class="table-main">
    <div class="query-content">
      <div class="query-search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="">
            <el-input v-model="formInline.text" placeholder="请输入标准国际化文件名" style="min-width: 205px" />
          </el-form-item>
          <el-form-item label="发布日期:">
            <el-date-picker v-model="formInline.date1" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable />
          </el-form-item>
        </el-form>
      </div>
      <div class="query-btn">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="success" @click="onReset">重置</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%" empty-text="暂无数据">
      <el-table-column prop="internationalizationName" width="800" label="名称" align="center" />
      <el-table-column prop="releaseDate" width="150" label="发布日期" align="center" />
      <el-table-column prop="fileStatus" label="文件" align="center">
        <template #default="scope">
          <el-button type="primary" @click="showDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-content">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 100]"
          :small="small"
          background
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from "vue";
  import CryptoJS from "crypto-js";
  import zhCn from "element-plus/es/locale/lang/zh-cn";
  import axios from "axios";
  import { formatDate } from "@/utils/dateFormat";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { useRouter } from "vue-router";
  import { getServerUrl } from "@/utils/url";
  const serverUrl = getServerUrl();
  const router = useRouter();

  const tableData = ref([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const formInline = reactive({
    date1: [],
    text: "",
  });
  const small = ref(false);

  const onSubmit = () => {
        currentPage.value = 1;
    initData();
  };
  const onReset = () => {
    formInline.text = "";
    formInline.date1 = [];
    currentPage.value = 1;
    initData();
  };
  const handleSizeChange = (val: number) => {
    pageSize.value = val;
    initData();
  };
  const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    initData();
  };
  const showDetail = async (value: any) => {
    const timestamp = Date.now();
    const secretKey = "jkysh2jgbstandard";
    // 生成receivedToken
    const receivedToken = CryptoJS.HmacSHA256(value.internationalizationFileId + ":" + timestamp, secretKey).toString(CryptoJS.enc.Hex);
    if (value.internationalizationFileId) {
      try {
        const response = await axios.get(`${serverUrl}api/files/webPreview`, {
          params: {
            fileId: value.internationalizationFileId,
            timestamp: timestamp,
            receivedToken: receivedToken,
          },
        });

        if (!response.data.data) {
          ElMessage.error("文件不存在或数据无效");
        } else if (response.data.data.url) {
          window.open(response.data.data.url, "_blank");
        } else {
          ElMessage.error("文件预览失败: 未返回有效的预览URL");
        }
      } catch (error) {
        if (error.response) {
          const errorData = error.response.data;
          ElMessage.error(errorData.message || "文件预览失败");
        } else {
          ElMessage.error("网络异常，请稍后重试");
        }
      }
    }
    // window.open(fileUrl.value, '_blank'); // 使用_blank在新窗口中打开
  };
  const initData = async () => {
    try {
      const startReleaseDate = formatDate(formInline.date1[0], "yyyy-MM-dd");
      const endReleaseDate = formatDate(formInline.date1[1], "yyyy-MM-dd");
      const response = await axios.get(serverUrl + "internationalStandard/externalList", {
        params: {
          internationalizationName: formInline.text,
          startReleaseDate: startReleaseDate,
          endReleaseDate: endReleaseDate,
          pageNum: currentPage.value,
          pageSize: pageSize.value,
        },
      });
      tableData.value = response.data.data.list;
      total.value = response.data.data.total;
    } catch (error) {
      console.error("数据加载失败:", error);
    }
  };
  onMounted(() => {
    initData();
  });
</script>
<style lang="scss" scoped>
.query-content {
  display: flex;
  justify-content: space-between;
}

.query-search {
  width: 70%;
}

.query-btn {
  min-width: 145px;
}

.pagination-content {
  margin-top: 1.43rem;
  display: flex;
  justify-content: center;
}

.icon-w {
  margin-left: 20px;
}

::v-deep .el-table__empty-text {
  color: #666;
  /* 文本颜色 */
  font-size: 16px;
  /* 文本大小 */
  margin: 40px 0;
  /* 上下间距，避免过于紧凑 */
}
</style>
